import React, { memo } from "react";
import { useDispatch } from "react-redux";

import { FourWrap } from "./style";
import { addSongId } from "../../../pages/player/store/actionType";

export default memo(function Four(props) {
  const dispatch = useDispatch();

  const addSongs = () => {
    if (props.id != undefined) {
      dispatch(addSongId(props.id));
    }
  };

  return (
    <FourWrap>
      <div className="tr-time-box">
        <i onClick={addSongs} className="tr-time-add imgIcon fl"></i>
        <i
          onClick={(e) => props.collectSongs()}
          className="tr-time-collect sprite_table fl"
        ></i>
        <i
          onClick={(e) => props.zhuanfaSongs()}
          className="tr-time-zhuanfa sprite_table fl"
        ></i>
        <i
          onClick={(e) => props.loadSongs()}
          className="tr-time-load sprite_table fl"
        ></i>
      </div>
    </FourWrap>
  );
});
